<template>
	<view class="page-index">
		<!-- 长得像轮播图的图 -->
		<view class="swiper" v-if="code==250">
			<image :src="swiperUrl" mode="" class="image" @click="imageSee()"></image>
			<view class="image-box">
				<view class="image-item" v-for="(item,index) in form.images" :key="index" @click="urlChange(item,index)">
					<image :src="item" mode="" class="image"></image>
				</view>
			</view>
		</view>
		<!-- 位置 -->
		<view class="position" v-if="code==250">
			{{form.title}}
		</view>
		<!-- 卡片 -->
		<view class="about" v-if="code==250">
			<view class="card">
				<view class="border-box">
					<view class="card-item" v-for="(item,index) in form.cardList" :key="index" >
						<view class="value">
							{{item.value}}
						</view>
						<view class="title">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="peculiarity">
				<view class="peculiarity-item" v-for="(item,index) in form.peculiarityList" :key="index">
					<view class="box">
						<view class="title">
							{{item.title}}
						</view>
						<view class="value">
							{{item.value}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 简介标题 -->
		<view class="simple-title" style="padding: 40rpx 32rpx 16rpx;" v-if="code==250">
			房源简介
		</view>
		<view class="simple-box" v-if="code==250">
			<view class="simple-item">
				<view class="simple-all">
					<view v-for="(item,index) in form.configure" :key="index" style="width: 20%;margin-top: 32rpx;">
						<text :class="'iconfont ' + item.class" style="font-size: 64rpx;"></text>
						<view class="title">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="simple-content" v-html="form.content">
				</view>
			</view>
		</view>
		<view class="position-title" v-if="code==250">
			房源位置
		</view>
		<view class="position-box" @click="openLocation()" v-if="code==250">
			<view class="position-item">
				<view class="item1">
					<view class="title">
						{{form.address_name}}
					</view>
					<view class="position-now">
						{{form.address}}
					</view>
				</view>
				<view class="item2">
					<image src="../../../static/home/Group.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>
			</view>
		</view>
		<view class="" style="height: 120px;" v-if="code==250">

		</view>
		<view class="fixed" v-if="code==250">
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="nbtn" v-if="!token">
				<view class="phone" @click="toPhone()">
					电话咨询
				</view>
			</button>
			<view class="phone" @click="toPhone()" v-else>
				电话咨询
			</view>
		</view>
		<view :class="[scrollTop>=150?'fixeds1':'fixeds']" :style="{height: NavHeight + 'px'}" v-if="code==250">
			<view style="margin-bottom: 20rpx;margin-left: 10rpx;" @click='back()'>
				<u-icon name="arrow-left" :color="[scrollTop>=150?'#000000':'#ffffff']" size="18"></u-icon>
			</view>
		</view>
		<view :class="[scrollTop>=150?'fixeds1':'fixeds']" :style="{height: NavHeight + 'px'}" v-if="code==1">
			<view style="margin-bottom: 20rpx;margin-left: 10rpx;" @click='back()'>
				<u-icon name="arrow-left" :color="[scrollTop>=150?'#000000':'#000000']" size="18"></u-icon>
			</view>
		</view>
		<view class="spaceErr" v-if="code==1">
			<image src="../../../static/home/space.png" mode="" style="margin-top: 100px;"></image>
			<view class="">
				未查询到房源
			</view>
		</view>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	import * as user from '@/api/user.js'
	export default {
		data() {
			return {
				NavHeight: this.NavHeight,
				token: '',
				index: 0,
				swiperUrl: '', //长得像轮播图的图的当前Url
				imgUrl: [], //长得像轮播图的Url列表
				scrollTop: 0,
				form: {
					address: "",
					address_name: "",
					cardList: [],
					configure: [],
					content: "",
					id: '',
					images: [],
					latitude: "",
					longitude: "",
					peculiarityList: [],
					title: ""
				},
				bottom: '',
				loginInfo: {
					code: '',
					phoneCode: ''
				}, //登录信息
				userInfo: {
					phone: '',
					avatar: '',
					nickname: ''
				}, //用户信息
				code: '',
				eeeee: ''
			}
		},
		onLoad(params) {
			this.token = uni.getStorageSync('token')
			this.realestateId = params.id
			this.getRealestateInfo(params.id)
			this.getMenu()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onShareAppMessage() {
			const promise = new Promise(resolve => {
				setTimeout(() => {
					resolve({
						title: '附近的房源，快来看看～'
					})
				}, 200)
			})
			return {
				title: '附近的房源，快来看看～',
				path: `/pages/home/details/details?id=${this.realestateId}`,
				promise
			}
		},
		// onShareAppMessage() {
		//   const promise = new Promise(resolve => {
		//     setTimeout(() => {
		//       resolve({
		//         title: '自定义转发标题'
		//       })
		//     }, 2000)
		//   })
		//   return {
		//     title: '自定义转发标题',
		//     path: '/pages/home/index',
		//     promise 
		//   }
		// },
		methods: {
			getMenu() {
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.bottom = menuButtonInfo.bottom
			},
			// 改变长得像轮播图的图的Url
			urlChange(item, index) {
				this.swiperUrl = item
				this.index = index
			},
			//获取详情
			getRealestateInfo(id) {
				index.getRealestateInfo({ realestateId: id }).then(res => {
					if (res.data.heng == 1) {
						this.code = res.data.heng
					} else {
						this.code = res.data.heng
						this.form = res.data
						this.swiperUrl = res.data.images[0]
					}
				})
			},
			// 地图导航
			openLocation() {
				let that = this
				const latitude = +that.form.latitude
				const longitude = +that.form.longitude
				wx.openLocation({
					latitude: latitude,
					longitude: longitude,
					scale: 18
				})
			},
			toPhone() {
				if (this.token) {
					index.getRealestatePhone({ realestateId: this.realestateId }).then(res => {
						uni.makePhoneCall({
							phoneNumber: res.data.phone //仅为示例
						});
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请登录',
						duration: 2000
					});
					// uni.switchTab({
					// 	url: '/pages/user/index'
					// });
				}
			},
			back() {
				var pages = getCurrentPages();
				if (pages.length == 1) {

					uni.reLaunch({
						url: '/pages/home/index'
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			getPhoneNumber(e) {
				let that = this
				that.loginInfo.phoneCode = e.detail.code
				if (that.loginInfo.phoneCode) {
					uni.login({
						provider: 'weixin',
						onlyAuthorize: true,
						success: function(loginRes) {
							that.loginInfo.code = loginRes.code
							that.wxLogin()
						}
					});
				}
			},
			wxLogin() {
				let that = this
				user.wxLogin(this.loginInfo).then(res => {
					console.log(res);
					uni.setStorage({
						key: 'token',
						data: res.data.token,
						success: function() {
							that.token = res.data.token
						}
					});
				})
			},
			imageSee() {
				uni.previewImage({
					urls: this.form.images,
					current: this.index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-index {
		background: #F8F8F8;
		height: 100%;

		.swiper {
			width: 100%;
			height: 544rpx;
			position: relative;

			.image {
				width: 100%;
				height: 100%;
			}

			.image-box {
				position: absolute;
				bottom: 20rpx;
				right: 30rpx;
				display: flex;
				justify-content: flex-end;

				.image-item {
					margin-right: 10rpx;
					z-index: 1000000;

					.image {
						width: 82rpx;
						height: 60rpx;
						border: 2rpx solid #FFFFFF;
						border-radius: 8rpx;
						will-change: transform;
					}
				}
			}
		}

		.position {
			font-size: 40rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 700;
			color: #202020;
			padding: 32rpx;
		}

		.about {
			padding: 0 32rpx;

			.card {
				padding: 16rpx 32rpx;
				background: #FFFFFF;

				.border-box {
					display: flex;
					justify-content: space-between;
					text-align: center;
					border-bottom: 2rpx solid transparent;
					border-color: rgba(0, 0, 0, 0.04);

					.card-item {
						padding: 24rpx 22rpx;

						.value {
							font-size: 32rpx;
							font-family: DIN Pro-Bold, DIN Pro;
							font-weight: bold;
							color: #BB2F2F;
						}

						.title {
							margin-top: 8rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							color: #404040;
						}
					}
				}

			}

			.peculiarity {
				padding: 16rpx 32rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.peculiarity-item {
					padding: 16rpx 0;
					width: 50%;

					.box {
						display: flex;
						justify-content: flex-start;

						.title {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							color: #202020;
							opacity: 0.5;
						}

						.value {
							margin-left: 12rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							color: #202020;
						}
					}
				}

			}
		}

		.simple-title {
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 700;
			color: #202020;
			padding: 32rpx;
		}

		.simple-box {
			padding: 32rpx 32rpx 0rpx 32rpx;

			.simple-item {
				background: #FFFFFF;
				padding: 32rpx;
				border-radius: 16rpx;

				.simple-all {
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-between;
					text-align: center;

					.title {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #202020;
					}
				}

				.simple-content {
					margin-top: 26rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #202020;
					line-height: 36rpx;
				}
			}
		}

		.position-title {
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 700;
			color: #202020;
			padding: 40rpx 32rpx 24rpx;
		}

		.position-box {
			padding: 0 32rpx;

			.position-item {
				display: flex;
				justify-content: space-between;
				background: #FFFFFF;
				padding: 44rpx 32rpx;
				border-radius: 16rpx;

				.title {
					font-size: 32rpx;
					font-weight: 700;
					color: #202020;
					line-height: 38rpx;
				}

				.position-now {
					margin-top: 28rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(32, 32, 32, 0.5);
					line-height: 24rpx;
				}
			}
		}

		.fixed {
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			width: 100%;
			height: 160rpx;
			font-size: 28rpx;

			.nbtn {
				-webkit-tap-highlight-color: transparent;
				box-sizing: content-box;
				cursor: pointer;
				position: relative;
				text-align: left;
				text-decoration: none;
				background: #ffffff;
				padding: 0;
				font-size: 28rpx;
			}

			.nbtn::after {
				border: 0px solid rgba(0, 0, 0, 0);
				border-radius: 0px;
			}

			// padding: 40rpx;
			.phone {
				// width: 100%;
				// height: 100%;
				height: 80rpx;
				line-height: 80rpx;
				margin: 40rpx;
				background: #006FD0;
				text-align: center;
				border-radius: 16rpx;
				color: #FFFFFF;
				font-size: 28rpx;
			}
		}

		.fixeds {
			font-weight: bold;
			position: fixed;
			top: 0;
			padding-left: 8rpx;
			z-index: 100000000;
			width: 100%;
			background: transparent;
			font-size: 35rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			transition-duration: 0.5s;
			color: #ffffff;
		}

		.fixeds1 {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			font-weight: bold;
			position: fixed;
			top: 0;
			padding-left: 8rpx;
			z-index: 100000000;
			width: 100%;
			// background: transparent;	
			font-size: 35rpx;
			background: #FFFFFF;
			transition-duration: 0.5s;
		}

		.spaceErr {
			background: #F8F8F8;
			height: 100vh;
			text-align: center;
		}
	}
</style>
